<template>
  <div class="app-container">
    <div slot="footer" style="margin-bottom: 20px" class="dialog-footer">
      <el-button type="warning" @click="$router.go(-1)">返 回</el-button>
    </div>
    <el-form ref="form" :model="form"  label-width="200px">
      <el-row>
        <el-col :span="10">


          <el-form-item label="项目名称：" prop="location">
            {{ form.location }}
          </el-form-item>
          <el-form-item label="课题号" prop="taskId">
            {{form.taskId}}
          </el-form-item>

          <el-form-item label="项目类型" prop="type">
            <dict-tag :options="dict.type.villages_project_type" :value="form.type"/>

          </el-form-item>
          <el-form-item label="项目类别" prop="projectCategory">
            <dict-tag :options="dict.type.village_project_category" :value="form.projectCategory"/>

          </el-form-item>
          <el-form-item label="项目级别" prop="projectMold">
            <dict-tag :options="dict.type.village_achievement_rank" :value="form.projectMold"/>

          </el-form-item>

          <el-form-item label="项目主持人：" prop="programLeader">
            {{ form.programLeader }}
          </el-form-item>

          <el-form-item label="校级配套经费" prop="schoolSupportingFunds" style="width: 70%;">
            {{ form.schoolSupportingFunds }}
          </el-form-item>
          <el-form-item label="市级配套经费" prop="citySupportingFunds" style="width: 70%;">
            {{ form.citySupportingFunds }}
          </el-form-item>

          <el-form-item label="总项目经费：" prop="projectFund">
            {{ form.projectFund }}
          </el-form-item>
          <el-form-item label="单位名称：" prop="nameOfWorkingUnit">
            {{ form.nameOfWorkingUnit }}
          </el-form-item>
          <el-form-item label="通信地址：" prop="mailingAddress">
            {{ form.mailingAddress }}
          </el-form-item>

        </el-col>
        <el-col :span="2" style="height: 616px;display: flex;justify-content: center">
          <div style="height: 100%;width: 1px;background-color: #9f9f9f"></div>
        </el-col>

        <el-col :span="12">
          <el-form-item label="项目预算详情" style="width: 80%;">
            <el-button type="primary" @click="projectbudgetopen=true" icon="el-icon-plus"></el-button>
          </el-form-item>

          <el-dialog :visible.sync="projectbudgetopen" width="650px" append-to-body >
            <el-divider content-position="center">教研项目预算信息</el-divider>

            <el-table :data="villageProjectMoneyList" ref="villageProjectMoney">

              <el-table-column label="编号" align="center" width="120">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="预算项目名称" align="center" prop="name" width="280">
                <template slot-scope="scope">
                  {{scope.row.name}}
                </template>
              </el-table-column>
              <el-table-column label="金额" align="center" prop="money" width="210">
                <template slot-scope="scope">
                  {{scope.row.money}}
                </template>
              </el-table-column>

            </el-table>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="projectbudgetopen = false">确 定</el-button>
            </div>
          </el-dialog>
          <el-form-item label="邮政编码：" prop="postalCode">
            {{ form.postalCode }}
          </el-form-item>
          <el-form-item label="联系电话：" prop="phone">
            {{ form.phone }}
          </el-form-item>
          <el-form-item label="邮箱：" prop="eMail">
            {{ form.eMail }}
          </el-form-item>

          <el-form-item label="立项时间：" prop="projectApprovalTime">
            {{ form.projectApprovalTime }}
          </el-form-item>
          <el-form-item label="经费类型：" prop="supportingFundsType">
            <dict-tag :options="dict.type.village_ongoing_development" :value="form.supportingFundsType"/>
          </el-form-item>
          <el-form-item label="项目状态：" prop="projectStatus">
            <dict-tag :options="dict.type.village_project_status" :value="form.projectStatus"/>
          </el-form-item>
          <el-form-item label="剩余经费：" prop="balance">
            {{ form.balance }}
          </el-form-item>
          <el-form-item label="开始时间：" prop="beginTime">
            {{ form.beginTime }}
          </el-form-item>
          <el-form-item label="截止时间：" prop="cutOffTime">
            {{ form.cutOffTime }}
          </el-form-item>
          <el-form-item label="资料上传列表：" prop="cutOffTime">
            <el-button type="primary" @click="dataopen = true">查看资料列表</el-button>
          </el-form-item>

          <el-dialog title="资料列表" :visible.sync="dataopen" width="900px" append-to-body>
            <el-form-item label="立项申请书：" prop="resignationLetter">
              <file-upload style="margin-left: 50px;width: 480px" :isShowTip="false" :openUplad="false" v-model="form.resignationLetter" v-show="form.resignationLetter"/>
              <el-tag type="info" v-show="!form.resignationLetter">暂未上传</el-tag>
            </el-form-item>
            <el-form-item label="任务书：" prop="task">
              <file-upload style="margin-left: 50px;width: 480px" :isShowTip="false" :openUplad="false" v-model="form.task" v-show="form.task"/>
              <el-tag type="info" v-show="!form.task">暂未上传</el-tag>
            </el-form-item>
            <el-form-item label="开题报告：" prop="proposalMaterial">
              <file-upload style="margin-left: 50px;width: 480px" :isShowTip="false" :openUplad="false" v-model="form.proposalMaterial" v-show="form.proposalMaterial"/>
              <el-tag type="info" v-show="!form.proposalMaterial">暂未上传</el-tag>
            </el-form-item>
            <el-form-item label="中期报告：" prop="interimReport">
              <file-upload style="margin-left: 50px;width: 480px" :isShowTip="false" :openUplad="false" v-model="form.interimReport" v-show="form.interimReport"/>
              <el-tag type="info" v-show="!form.interimReport">暂未上传</el-tag>
            </el-form-item>
            <el-form-item label="变更材料：" prop="changeOfMaterial">
              <file-upload style="margin-left: 50px;width: 480px" :isShowTip="false" :openUplad="false" v-model="form.changeOfMaterial" v-show="form.changeOfMaterial"/>
              <el-tag type="info" v-show="!form.changeOfMaterial">暂未上传</el-tag>
            </el-form-item>
            <el-form-item label="研究报告：" prop="studyReport">
              <file-upload style="margin-left: 50px;width: 480px" :isShowTip="false" :openUplad="false" v-model="form.studyReport" v-show="form.studyReport"/>
              <el-tag type="info" v-show="!form.studyReport">暂未上传</el-tag>
            </el-form-item>
            <el-form-item label="结题材料：" prop="finishingMaterials">
              <file-upload style="margin-left: 50px;width: 480px" :isShowTip="false" :openUplad="false" v-model="form.finishingMaterials" v-show="form.finishingMaterials"/>
              <el-tag type="info" v-show="!form.finishingMaterials">暂未上传</el-tag>
            </el-form-item>
            <el-form-item  label="佐证材料：" prop="supportingMaterial">
              <file-upload style="margin-left: 50px;width: 480px" :isShowTip="false" :openUplad="false" v-model="form.supportingMaterial" v-show="form.supportingMaterial"/>
              <el-tag type="info" v-show="!form.supportingMaterial">暂未上传</el-tag>
            </el-form-item>


          </el-dialog>
        </el-col>

      </el-row>
    </el-form>


  </div>
</template>

<script>
import { getReform, listReform } from '@/api/village/reform'

export default {
  name: 'Detail',
  dicts: ['village_project_status', 'village_achievement_rank', 'villages_project_type', 'village_project_category', 'village_ongoing_development'],
  data() {
    return {
      projectbudgetopen:false,
      dataopen: false,
      villageProjectMoneyList: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 教改项目表格数据
      reformList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      rules: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        supportingFundsType: null
      },
      // 表单参数
      form: {}

    }
  },
  created() {
    if (this.$route.query.id != null) {
      this.handleUpdate(this.$route.query)
    }
  },
  methods: {
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getReform(id).then(response => {
        this.form = response.data
        this.villageProjectMoneyList = response.data.villageProjectMoneyList;

      })
    },
    /** 查询教改项目列表 */
    getList() {
      this.loading = true
      listReform(this.queryParams).then(response => {
        this.reformList = response.rows
        this.total = response.total
        this.loading = false
        // this.form = response.rows[0]

      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        type: null,
        location: null,
        programLeader: null,
        nameOfWorkingUnit: null,
        mailingAddress: null,
        postalCode: null,
        phone: null,
        eMail: null,
        projectApprovalTime: null,
        projectFund: null,
        supportingFunds: null,
        supportingFundsType: null,
        projectStatus: null,
        beginTime: null,
        cutOffTime: null,
        task: null,
        interimReport: null,
        finishingMaterials: null,
        supportingMaterial: null,
        changeOfMaterial: null,
        resignationLetter: null,
        createTime: null,
        updateTime: null,
        createBy: null,
        updateBy: null,
        isDelete: null
      }
      this.resetForm('form')
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('village/reform/export', {
        ...this.queryParams
      }, `reform_${new Date().getTime()}.xlsx`)
    },
    // 详情
    skipDetail(row) {
      this.$router.push(`/Pedagogicaldetail?id=${row.id}`)
    }
  }
}
</script>

<style>
.line {
  width: 10vw;
  height: 100%;
  background-color: #000;
}

.upload-file .upload-file-uploader {
  display: none;
}
</style>
